<!DOCTYPE HTML>
<?php $this->headLink()->appendStylesheet('/css/bootstrap.min.css'); ?>
<?php $this->headLink()->appendStylesheet('/css/jquery.fileupload-ui.css'); ?>

<?php $this->headScript()->appendFile('/js/jquery.ui.widget.js'); ?>
<?php $this->headScript()->appendFile('http://blueimp.github.com/JavaScript-Templates/tmpl.min.js'); ?>
<?php $this->headScript()->appendFile('http://blueimp.github.com/JavaScript-Canvas-to-Blob/canvas-to-blob.min.js'); ?>
<?php $this->headScript()->appendFile('http://blueimp.github.com/cdn/js/bootstrap.min.js'); ?>
<?php $this->headScript()->appendFile('/js/jquery.fileupload.js'); ?>
<?php $this->headScript()->appendFile('/js/jquery.fileupload-fp.js'); ?>
<?php $this->headScript()->appendFile('/js/jquery.fileupload-ui.js'); ?>
<?php $this->headScript()->appendFile('/js/main.js'); ?>
<?php echo $this->headScript(); ?>
<?php echo $this->headLink(); ?>
<script>
    $(function(){
       $(".importar").addClass('activet');//Adiciona classe de link ativado 
    });
</script>    
<div class="enviardados">
<form id="fileupload" action="/importardados/upload" method="POST" enctype="multipart/form-data">

    <!-- The fileupload-buttonbar contains buttons to add/delete files and start/cancel the upload -->
    <div class="row fileupload-buttonbar">
        <div class="span9">
            <!-- The fileinput-button span is used to style the file input field as button -->
            <span class="btn btn-success fileinput-button">
                <i class="icon-plus icon-white"></i>
                <span>Adicionar Planilhas</span>
                <input type="file" name="files[]" multiple>
            </span>
            <button type="submit" class="btn btn-primary start">
                <i class="icon-upload icon-white"></i>
                <span>Enviar Tudo</span>
            </button>
            <button type="reset" class="btn btn-warning cancel">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancelar Envio</span>
            </button>
        </div>
        <!-- The global progress information -->
        <div class="span5 fileupload-progress fade">
            <!-- The global progress bar -->
            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100">
                <div class="bar" style="width:0%;"></div>
            </div>
            <!-- The extended global progress information -->
            <div class="progress-extended">&nbsp;</div>
        </div>
    </div>
    <!-- The loading indicator is shown during file processing -->
    <div class="fileupload-loading"></div>
    <br>
    <!-- The table listing the files available for upload/download -->
    <table role="presentation" class="table table-striped"><tbody class="files"></tbody></table>
</form>
</div>

<!-- modal-gallery is the modal dialog used for the image gallery -->

<!-- The template to display files available for upload -->
<script id="template-upload" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}

    <tr class="template-upload fade">
        <td class="preview"><span class="fade"></span></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        {% if (file.error) { %}
        <td class="error" colspan="2"><span class="label label-important">Erro</span> {%=file.error%}</td>
        {% } else if (o.files.valid && !i) { %}
        <td>
            <div class="progress progress-success progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"><div class="bar" style="width:0%;"></div></div>
        </td>
        <td class="start">{% if (!o.options.autoUpload) { %}
            <button class="btn btn-primary">
                <i class="icon-upload icon-white"></i>
                <span>Iniciar</span>
            </button>
            {% } %}</td>
        {% } else { %}
        <td colspan="2"></td>
        {% } %}
        <td class="cancel">{% if (!i) { %}
            <button class="btn btn-warning">
                <i class="icon-ban-circle icon-white"></i>
                <span>Cancelar</span>
            </button>
            {% } %}</td>
    </tr>

    {% } %}
</script>
<!-- The template to display files available for download -->
<script id="template-download" type="text/x-tmpl">
    {% for (var i=0, file; file=o.files[i]; i++) { %}
    <tr class="template-download fade">
        {% if (file.error) { %}
        <td></td>
        <td class="name"><span>{%=file.name%}</span></td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td class="error" colspan="2"><span class="label label-important">Erro</span> {%=file.error%}</td>
        {% } else { %}
        <td class="preview">{% if (file.thumbnail_url) { %}
            <a href="{%=file.url%}" title="{%=file.name%}" ><img src="{%=file.thumbnail_url%}"></a>
            {% } %}</td>
        <td class="name">
            <a href="{%=file.url%}" title="{%=file.name%}" rel="{%=file.thumbnail_url%}" download="{%=file.name%}">{%=file.name%}</a>
        </td>
        <td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
        <td colspan="2"></td>
        {% } %}
    </tr>
    {% } %}
</script>
